<template>
	<view class="loginPage">
		<!-- 头部×号 -->
		<uni-nav-bar left-icon="closeempty" leftIconSize="40" status-bar :shadow="false" :border="false" :fixed="true"
		 @clickLeft="back" />

		<!-- 账号密码或手机号登陆标题 -->
		<view class="accountPassword">{{status ? "账号密码登录" : "手机验证码登录"}}</view>

		<!-- 账号密码登录 -->
		<template v-if="status">
			<!-- 账号 -->
			<view class="account">
				<input type="text" placeholder-style="placeholder" v-model="account" placeholder="昵称/手机号/邮箱" maxlength="20" />
			</view>
			<!-- 密码 -->
			<view class="password">
				<input type="text" placeholder-style="placeholder" v-model="password" placeholder="请输入密码" maxlength="20" />
				<text class="forgetPassword" @tap="forgetPassword">忘记密码?</text>
			</view>
		</template>

		<!-- 手机验证码登录 -->
		<template v-else>
			<view class="account">
				<text class="account86">+86</text>
				<input type="text" placeholder-style="placeholder" v-model="phone" placeholder="手机号" maxlength="20" />
			</view>
			<!-- 验证码 -->
			<view class="password">
				<input type="text" placeholder-style="placeholder" v-model="code" placeholder="请输入验证码" maxlength="6" />
				<text :class="codeTime > 0 ? 'timer':'getPassword'" @tap="getPassword">{{codeTime > 0 ? codeTime+" S" : "获取验证码"}}</text>
			</view>
		</template>

		<!-- 登陆按钮 -->
		<button class="login" :disabled="disabled" hover-start-time=15 hover-stay-time=200 hover-class="bgColorLogin" @tap="login">登录</button>

		<!-- 验证码登陆或登陆遇到问题 -->
		<view class="verificationCode">
			<text @tap="changeStatus">{{status ? "验证码登陆": "账号密码登录"}}</text>
			<text></text>
			<text @tap="problem">登陆遇到问题</text>
		</view>

		<!-- 社交账号登录 -->
		<view class="contactLogin">社交账号登录</view>

		<!-- 各种社交账号 -->
		<other-login @thirdPartyLogin="thirdPartyLogin" />

		<!-- 协议 -->
		<view class="agreement">
			<text>注册即代表您同意</text>
			<text>《XXX社区协议》</text>
		</view>
	</view>
</template>

<script>
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import otherLogin from "@/components/common/other-login.vue";
	// 与后台交互的数据功能
	import logIn from "./login.js";
	export default {
		components: {
			uniNavBar,
			uniIcons,
			otherLogin
		},
		onLoad() {},
		data() {
			return {
				// 手机号和验证码的登录切换
				status: true,
				// 账号密码登录
				account: void 0,
				password: void 0,
				// 手机验证码登录
				phone: void 0,
				code: void 0,
				// 获取验证码的时间
				codeTime: 0,
				socialContactList: [{
					type: "icon-weixin",
					content: "微信"
				}, {
					type: "icon-icon",
					content: "QQ"
				}, {
					type: "icon-weibo",
					content: "微博"
				}],
			};
		},
		computed: {
			disabled() {
				if ((this.account && this.password) || (this.phone && this.code)) {
					return false;
				};
				return true;
			},
		},
		methods: {
			// 返回上一个页面
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 忘记密码了
			forgetPassword() {},
			// 切换登录方式
			changeStatus() {
				this.status = !this.status;
				// 账号密码登录
				this.account = "";
				this.password = "";
				// 手机验证码登录
				this.phone = "";
				this.code = "";
			},
			// 登陆遇到问题
			problem() {},
			// 获取验证码
			getPassword() {
				// 先验证手机号是否正确
				if (this.validate()) {
					// 如果已经处于倒计时的状态了，就不能新开定时器了；
					if (this.codeTime > 0) return false;

					this.codeTime = 60;
					let timer = setInterval(() => {
						this.codeTime--;
						if (this.codeTime == 0) {
							clearInterval(timer);
						};
					}, 1 * 1000);
				};
			},
			// 表单认证
			validate() {
				// 判断手机号的正则
				let phoneReg = /^1[3456789]\d{9}$/;
				// 判断邮箱的正则
				// let mailReg = /^([a-zA-Z\d])(\w|\-)+@[a-zA-Z\d]+\.[a-zA-Z]{2,4}$/;
				// 输入手机号时，才对手机进行验证
				if (this.phone) {
					if (phoneReg.test(this.phone)) return false;
					uni.showToast({
						title: "手机号有误",
						icon: "none"
					});
					return true;
				};
			},
			// 登录功能
			async login() {
				if (this.validate()) return;
				if (this.phone && this.code) {
					let res = new logIn().codeLogin(this.phone, this.code);
					console.log(res);
					return;
				};
			},
			// 使用第三方登录
			async thirdPartyLogin(data) {
				new logIn().thirdPartyLogin(data);
			},
		},
	};
</script>

<style lang="scss">
	// 账号和密码
	.accountPassword {
		font-size: 2rem;
		letter-spacing: 10rpx;
		color: #B0AEAC;
		text-align: center;
		padding: 100rpx 0rpx 80rpx;
	}

	.account,
	.password {
		height: 100rpx;
		display: flex;
		align-items: center;
		margin: 0rpx 20rpx;
		border-bottom: 1rpx solid #E5E5E5;
		color: #555;

		input {
			flex: 1;
		}

		.placeholder {
			color: #EDEDED;
		}
	}

	.password {
		justify-content: space-between;

		input {
			margin-right: 30rpx;
		}

		>text {
			font-size: .9rem;
		}
	}


	// 手机号登录
	.account86 {
		margin-right: 40rpx;
	}

	// 忘记密码
	.forgetPassword {
		color: #D7D7D5;

		&:active {
			color: #C1C1C1;
		}
	}

	// 获取验证码
	.getPassword {
		@include flexCenterCenter;
		height: 100%;
		border-top: 18rpx solid #FFFFFF;
		padding: 0rpx 30rpx;
		background-color: #E84749;
		color: #FFFFFF;

		&:active {
			background-color: #DB1717;
		}
	}

	// 验证码倒计时
	.timer {
		width: 150rpx;
		@include flexCenterCenter;
		height: 100%;
	}

	// 登陆按钮的样式
	.login {
		@include flexCenterCenter;
		letter-spacing: 6rpx;
		border-radius: 50rpx;
		margin: 100rpx 30rpx 60rpx;
		height: 90rpx !important;
		font-size: 1.1rem;
		background-color: #FFB896 !important;
		color: #FFFFFF !important;
	}

	.bgColorLogin {
		background-color: #FCAF89 !important;
	}


	// 验证码登陆或登陆遇到问题的样式
	.verificationCode {
		@include flexCenterCenter;

		>text {
			font-size: 1.05rem;

			&:active {
				color: #05A0A7 !important;
			}

			&:first-of-type,
			&:last-of-type {
				flex: 1;
				color: #2D6E72;
			}

			&:first-of-type {
				text-align: right;
			}

			&:nth-of-type(2) {
				display: inline-block;
				width: 4rpx;
				height: 50rpx;
				background-color: #BBBBBB;
				margin: 0rpx 40rpx;
			}
		}
	}

	// 社交账号登录
	.contactLogin {
		margin: 60rpx auto;
		text-align: center;
		color: #B3B3B0;
		position: relative;

		&::before,
		&::after {
			position: absolute;
			width: 120rpx;
			height: 2rpx;
			background-color: #B3B3B0;
			top: 50%;
			content: "";
		}

		&::after {
			left: calc(50% + 130rpx);
		}

		&::before {
			right: calc(50% + 130rpx);
		}
	}

	// 协议
	.agreement {
		@include flexCenterCenter;
		margin-top: 50rpx;
		font-size: .85rem;

		>text {
			&:first-of-type {
				color: #B3B1B0;
			}

			&:last-of-type {
				color: #0065C0;
			}
		}
	}
</style>
